<template>
  <Drawer placement="right" :closable="true" v-model="visible" width="400" @on-close="cancel">
    <template #header>
      <div class="flex flex-col justify-between">
        <div class="flex items-center mb-4 gap-x-2">
          <img
            src="~@/assets/images/icon_End.png"
            class="w-6 h-6"
            alt="Start icon"
          />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">结束</p>
          </div>
        </div>
        <div class="text-sm text-gray-500">
          工作流的最终节点，用于返回工作流运行后的结果信息
        </div>
      </div>
    </template>
    <TypeTab
      v-model="form.retruevarortext"
      :data="DEFAULT_END_TAB"
      active-color="#4d53e8"
      bg-color="#efefef"
    />
    <CommonCollapse
      title="输出变量"
      tip="这些变量将在智能体调用工作流完成后被输出。在“返回变量”模式中，这些变量会被智能体总结后回复用户；在“返回文本”模式中，智能体只会回复你设定的“回答内容”。但在任何模式中，这些变量都可以在配置卡片时使用。"
    >
      <template #right>
        <Button
          type="primary"
          size="small"
          icon="md-add"
          @click="addInput"
        ></Button>
      </template>
      <div class="panel-table">
        <div class="panel-table-header">
          <div class="name">变量名</div>
          <div class="name">变量值</div>
        </div>
        <div class="panel-table-list">
          <Form ref="formEl" :model="form" label-position="top">
            <div
              class="flex items-center mb-4"
              v-for="(item, index) in form.inoutlist"
              :key="index"
            >
              <div class="panel-table-item" style="width: 160px">
                <FormItem
                  :key="index"
                  :prop="'inoutlist.' + index + '.varname'"
                  :rules="{
                    required: true,
                    message: '变量名不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    v-model="item.varname"
                    placeholder="输入变量名"
                    size="small"
                  />
                </FormItem>
              </div>
              <div
                class="panel-table-item"
                style="width: 100px; margin-right: 0"
              >
                <FormItem>
                  <Select size="small" v-model="item.vartype">
                    <Option
                      v-for="type in BE_TYPE_LIST"
                      :value="type.value"
                      :key="type.value"
                      >{{ type.label }}</Option
                    >
                  </Select>
                </FormItem>
              </div>
              <div class="panel-table-item" style="width: 180px">
                <FormItem
                  :prop="'inoutlist.' + index + '.varparam'"
                  :rules="{
                    required: true,
                    message: '变量值不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    size="small"
                    v-model="item.varparam"
                    check-strictly
                    placeholder="输入参数值"
                  >
                  </Input>
                </FormItem>
              </div>
              <div class="panel-table-item btn" @click="removeInput(index)">
                <Icon type="md-remove" />
              </div>
            </div>
          </Form>
        </div>
      </div>
    </CommonCollapse>
    <Divider v-show="form.retruevarortext == 'text'"></Divider>
    <CommonCollapse
      v-show="form.retruevarortext == 'text'"
      title="回答内容"
      tip="编辑智能体的回复内容，即工作流运行完成后，智能体中的LLM将不再组织语言，而是直接用这里编辑的内容原文回复对话。 可以使用{{变量名}}的方式引用输入参数中的变量"
    >
      <template #right>
        <div class="flex items-center">
          <span class="title">流式输出</span>
          <Tooltip
            transfer
            theme="light"
            placement="top left"
            max-width="400"
            content="开启时，回复内容中的大语言模型的生成内容将会逐字流式输出；关闭时，回复内容将全部生成后一次性输出。"
          >
            <Icon type="ios-alert-outline" size="12" />
          </Tooltip>
          <Switch v-model="form.isflow" size="small" class="ml-2" />
        </div>
      </template>
      <Form :model="form" label-position="top">
        <FormItem
          prop="content"
          :rules="{
            required: true,
            message: '回答内容不可为空',
            trigger: 'blur',
          }"
        >
          <Input
            v-model="form.content"
            type="textarea"
            :rows="4"
            placeholder="可以使用{{变量名}}、{{变量名.子变量名}}、{{变量名[数组索引]}}的方式引用输出参数中的变量"
          />
        </FormItem>
      </Form>
    </CommonCollapse>
  </Drawer>
</template>
<script setup>
import { ref } from 'vue';
import { BE_TYPE_LIST, DEFAULT_END_TAB } from '../../lib/constant';
import TypeTab from '@/components/TypeTab/index.vue';
import CommonCollapse from '@/components/CommonCollapse/index.vue';

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
});

const emit = defineEmits(['add', 'remove', 'cancel']);

const visible = ref(false);
const typeTab = ref(0);
// 组件的增删
const addInput = () => {
  emit('add');
};
const removeInput = (index) => {
  emit('remove', index);
};
const init = () => {
  visible.value = true;
};
const cancel = () => {
  visible.value = false;
  emit('cancel')
};

defineExpose({
  init,
});
</script>
<style lang="scss">
.panel-table-header {
  align-items: center;
  display: flex;
  gap: 4px;
  padding: 0 4px;

  .name {
    width: 120px;
    margin-right: 6px;
    box-sizing: content-box;
  }
  .center {
    text-align: center;
  }
}

:deep(.ivu-form-item-error-tip){
  font-size: 12px;
}
.panel-table-item {
  height: 30px;
  margin-right: 6px;
  &.center {
    text-align: center;
  }
  &.btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-left: 12px;
    height: 22px;
  }
}
</style>
